<template>
    <div>
        <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="true"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    
    const props=withDefaults(defineProps<{
        currentPage?:number,
        pageSize?:number,
        totalNum:number
    }>(),{
        currentPage:1,
        pageSize:5,
        totalNum:0
    })

    const emits=defineEmits(['changePageSize','changePage'])
    // 每页多少页数
    const handleSizeChange = (val: number) => {
        // console.log(`${val} items per page`)
        emits('changePageSize',val)
    }
    // 当前页数
    const handleCurrentChange = (val: number) => {
        // console.log(`current page: ${val}`)
        emits('changePage',val)
    }
</script>

<style lang="scss" scoped>
    .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
    margin-bottom: 16px;
    }
</style>